<template>
  <div class="course-wrap">
    <div class="course--wrap-item" v-for="v in tableData" :key="v.id">
      <div class="img-box">
        <img :src="coverImg(v)" />
      </div>
      <div class="txt-box">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="txt-wrap">
              <p>元素库名称：{{ v.title }}</p>
              <p>
                建设单位：<span>{{ deptName(v) }}</span>
              </p>
              <p>建设团队：{{ teamInfo(v) }}</p>
              <p>元素库类别：课程库</p>
            </div>
            <div class="btn-wrap">
              <el-button plain size="mini">预览</el-button>
              <el-button plain size="mini">提交审核</el-button>
              <el-button plain size="mini">上线发布</el-button>
              <el-button plain size="mini">撤销发布</el-button>
              <el-button plain size="mini">推荐</el-button>
              <el-button
                type="danger"
                plain
                size="mini"
                @click="handleDelete(row)"
                >删除</el-button
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="txt-wrap">
              <p>上传日期：{{ v.createTime }}</p>
              <p>
                审核状态：
                <span v-show="v.auditStatus == 1">待审核</span>
                <span class="color-success" v-show="v.auditStatus == 2">
                  审核通过
                </span>
                <span class="color-danger" v-show="v.auditStatus == 3">
                  不通过
                </span>
              </p>
            </div>
            <div class="btn-wrap">
              <el-button type="custom" size="mini" @click="handleManage(row)">
                进入管理
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import {
  sysCourseQuery,
  sysCourseDelete,
} from "@/api/admin/courseLibrary/sysCourse.js";
import Bus from "@/utils/bus.js";
import webinfo from "@/mixins/webinfo.js";
import setInfo from "@/mixins/setInfo.js";
import { courseAudit } from "../../mixins/CourseAudit.js";
export default {
  mixins: [webinfo, setInfo, courseAudit],
  data() {
    return {
      listQuery: {
        courseType: this.$route.meta.type,
        page: 1,
        limit: 10,
        sourceType: "1",
      },
      tableData: [],
      pageObj: {},
    };
  },
  props: ["sourceType"],
  computed: {
    showUnit: function () {
      return function (data) {
        if (data && data.childList) {
          return data.childList[0].name;
        } else {
          return "--";
        }
      };
    },
  },
  watch: {
    sourceType(v) {
      this.getList();
    },
  },
  mounted() {
    this.getList();
    Bus.$on("refreshCourseList", (v) => {
      if (v) {
        Object.assign(this.listQuery, v);
      }
      this.getList();
    });
  },
  beforeDestroy() {
    Bus.$off("refreshCourseList");
  },
  methods: {
    getList() {
      this.listQuery.sourceType = this.sourceType;
      if (this.listQuery.sourceType == 1) {
        this.listQuery.title = "";
      } else {
        this.listQuery.code = "";
      }
      sysCourseQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data;
        this.pageObj = res.data;
      });
    },
    //管理
    handleManage(row) {
      let type = this.$route.meta.type;
      this.$store.commit("SETCURCOURSE", row);
      if (type == 1) {
        this.$router.push({ name: "course-setting" });
      }
      if (type == 5) {
        this.$router.push({ name: "micro-setting" });
      }
    },
    //编辑
    handleEdit(row) {
      Bus.$emit("showDialogCourseAdd", row);
    },
    //删除确认
    handleDelete(row) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete(row);
        })
        .catch(() => {});
    },
    //删除
    delete(row) {
      sysCourseDelete(row.id).then((res) => {
        this.getList();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.cover-img {
  display: block;
  width: 40px;
  height: 30px;
}
.course-wrap {
  width: 100%;
  height: 670px;
  overflow-y: scroll;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
  &::-webkit-scrollbar {
    display: none;
  }
  .course--wrap-item {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #eee;
    height: 180px;
    overflow: hidden;
    .img-box {
      position: absolute;
      left: 20px;
      top: 20px;
      border: 1px solid #eee;
      width: 240px;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .txt-box {
      background: #fff;
      width: 100%;
      height: 180px;
      padding-left: 260px;
      box-sizing: border-box;
      .txt-wrap {
        height: 150px;
        p{
          color: #333;
        }
      }
    }
  }
}
</style>